<%include header %>
        <div class="container">
            <section>
                <div id="msg"></div>
                <% if(isExpire||!success){ %>
                <div class="alert alert-warning">
                    <a class='close' data-dismiss='alert' href='#'>&times;</a><i class="fa fa-warning"></i><%= msg%>
                </div>
                <% } %>
                <h2 class="page-header"><%= shopes[0]?shopes[0].name:'无商家' %></h2>
                <div class="row">
                    <div class="col-md-9 col-sm-8">
                        <p>欢迎使用饭否在线订餐系统,下单前请确认管理员是否在线。点餐时间:09:00-11:30、13:30-17:30【QQ群:280565305】</p>
                        <div class="table-responsive">
                            <table class="table table-striped table-hover">
                                <thead>
                                    <tr>
                                    <th>编号</th>
                                    <th>菜名</th>
                                    <th>价格</th>
                                    <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <% for(var i=0;i<foods.length;i++){ %>
                                    <tr>
                                        <td><%= i+1%></td>
                                        <td><%= foods[i].name%></td>
                                        <td><%= foods[i].price%>元/份</td>
                                        <td class="text-center"><a href="#" onclick="addOrder(<%= foods[i].id%>);return false;"class="btn btn-xs btn-success" 
                                        <% if(isExpire||!success){ %>
                                        disabled="disabled"
                                        <% } %>
                                        ><i class="fa fa-plus"></i> 加入购物车</a></td>
                                    </tr>
                                    <% } %>
                                </tbody>
                            </table>
                        </div>
                        
                    </div>
                    <!-- END LEFT -->

                    <div class="col-md-3 col-sm-4">
                        <div class="well"> 
                            <div>
                                <i class="fa fa-shopping-cart"></i> 购物车
                            </div>
                            <hr />
                            <div id="order"></div>
                            <p>总数: <label id="orderNum">0</label> 份</p>
                            <hr />
                            <div>
                                <button class="btn btn-sm btn-primary" id="submit"
                                <% if(isExpire||!success){ %>
                                    disabled="disabled"
                                <% } %>
                                ><i class="fa fa-coffee"></i> 下单</button>
                                <a href="/result" target="_blank"><button class="btn btn-sm btn-danger"><i class="fa fa-anchor"></i> 查看订餐结果</button></a>
                            </div>
                            <hr />
                            <div>
                                <i class="fa fa-credit-card"></i> <small>下单前请认真确认您的订单，一旦下单将无法修改,下单后请主动向管理员<strong>付款</strong>。</small>
                            </div>
                            
                            <!-- END Right NAV -->
                        </div>
                    </div><!-- END col-md-3 col-sm-4 -->

                </div>
            </section>
            <hr />
        </div>
        <%include footer%>

<script type="text/javascript">
var foodList=[];
<% for(var i=0;i<foods.length;i++){ %>
var obj={};
obj["id"]=<%= foods[i].id %>;
obj["name"]=<%- "'"+foods[i].name+"'" %>;
foodList.push(obj);
<% } %>

var getFoodInfo=function(foodId){
	for(var i=0;i<foodList.length;i++){
	    if(foodList[i].id==foodId){
	        return foodList[i];
	    }
	}
}
var orders=[];

//添加一个订单
var addOrder=function(foodId){
	orders.push(foodId);
	refreshOrderList();
}
//移除一个订单
var reduceOrder=function(foodId){
	for(var i=0;i<orders.length;i++){
	    if(orders[i]==foodId){
	        orders.splice(i,1);
	        break;
	    }
	}
	refreshOrderList();
}

//刷新购物车
var refreshOrderList=function(){
	var order=$("#order");
	//删除子元素
	order.empty();
	for(var i=0;i<orders.length;i++){
	   var orderInfo=getFoodInfo(orders[i]);
	   var node=$("<p><strong><a href='#'><i class='fa fa-trash-o'></i></a> "+orderInfo.name+"<strong></p>");
	   node[0].orderInfo=orderInfo;
	   node.click(function(){
	        reduceOrder(this.orderInfo.id);
	        return false;
	   })
	   order.append(node);
	}
	$("#orderNum").text(orders.length);
}

$("#submit").click(function(){
    //没有订单
    if(orders.length<1){
        var errMsg=$("<div class='alert alert-danger'><a class='close' data-dismiss='alert' href='#'>&times;</a><i class='fa fa-check'></i> 亲,您至少点一份吧！</div>");
        $("#msg").append(errMsg);
    }
    else{
        $.post("/order",{"orders":orders},function(data,status){
            console.log("返回的数据:"+JSON.stringify(data));
            var node;
            if(data.success){
                node=$("<div class='alert alert-success'><a class='close' data-dismiss='alert' href='#'>&times;</a><i class='fa fa-check'></i> "+ data.msg +"</div>");
            }
            else{
                node=$("<div class='alert alert-danger'><a class='close' data-dismiss='alert' href='#'>&times;</a><i class='fa fa-check'></i> "+ data.msg +"</div>");
            }
            $("#msg").append(node);
            $("#submit")[0].disabled="disabled";
        });
    }
    return false;
})

</script>